<template>
	<view class="y-page-common page">
		<view class="">
			<view class="card form">
				<view class="head">
					身份证影像信息
				</view>
				<view class="item-box">
					<view class="title">
						<text class="required">*</text>
						请上传借款人-身份证（正面）
					</view>
					<view class="image-content" @click="changeImg(1)">
						<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
							:src="src1">
						</image>
					</view>
				</view>
				<view class="item-box">
					<view class="title">
						<text class="required">*</text>
						请上传借款人-身份证（反面）
					</view>
					<view class="image-content" @click="changeImg(2)">
						<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
							:src="src2">
						</image>
					</view>
				</view>
			</view>
			<view class="card form">
				<view class="head">
					其他影像信息
				</view>
				<view class="item-box">
					<view class="title">
						请上传借款人婚姻证明
					</view>
					<view class="img-multi">
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/demo.webp">
							</image>
						</view>
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/add.jpg">
							</image>
						</view>
					</view>
				</view>
				<view class="item-box">
					<view class="title">
						<text class="required">*</text>
						请上传借款人配偶身份资料（身份证明/户口簿）
					</view>
					<view class="img-multi">
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/demo.webp">
							</image>
						</view>
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/add.jpg">
							</image>
						</view>
					</view>
				</view>
				<view class="item-box">
					<view class="title">
						<text class="required">*</text>
						请上传标注统一社会信用代码的营业执照或事业单位法人证书
					</view>
					<view class="img-multi">
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/demo.webp">
							</image>
						</view>
						<view class="image-content2">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill"
								src="../../../static/imgs_personal/add.jpg">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btns">
			<ReadmeBtn fixed="true" :readme="[]" text="提交" @submit="jumpTo"></ReadmeBtn>
		</view>
	</view>
</template>

<script>
	import cell from "@/components/cell.vue"
	export default {
		components: {
			cell
		},
		data() {
			return {
				src1: '../../../static/imgs_personal/img_collect1.jpg',
				src2: '../../../static/imgs_personal/img_collect2.jpg'
			}
		},
		onLoad() {

		},
		methods: {
			changeImg(type) {
				type === 1 ? this.src1 = '../../../static/imgs_personal/card1.webp' : this.src2 =
					'../../../static/imgs_personal/card2.webp'
			},
			async jumpTo() {
				if (!(this.src1.includes('card1') && this.src2.includes('card2'))) {
					uni.showToast({
						icon: "none",
						title: '请上传借款人身份证正/反面',
						duration: 3000,
						position: 'top'
					})
					return
				}
				await this.$myloading() // async
				uni.showToast({
					icon: "none",
					title: '提交成功',
					duration: 3000,
					position: 'top'
				})
				uni.setStorageSync('isImgCollect', true);
				uni.navigateTo({
					url: '/pages/personal/limit'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		margin-bottom: 200rpx;

		.form {
			// margin-bottom: 200rpx;
		}

		.head {
			font-weight: bold;
		}

		.item-box {
			margin-top: 20rpx;

			.title {
				.required {
					color: red;
				}

				margin: 20rpx 0;
			}

			.image-content {
				width: 100%;
				height: 50vw;
				padding: 20rpx;
				background-color: #E5F0FB;
				border-radius: 20rpx;
			}

			.img-multi {
				display: flex;

				.image-content2 {
					width: 20vw;
					height: 20vw;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}
			}

		}
	}
</style>